<template>
	<view class="index_page">
		<custom-tabs :tabs="tabs" :currentTab="tabIndex">
			<template slot="tabs_left">
				<view class="combox">
					<view class="text">抚顺</view>
					<view class="iconfont icon-arrow-down-bold"></view>
				</view>
			</template>
			<template slot="tabs_right">
				<navigator :url="'../search/search'"><view class="iconfont icon-search" style="padding:20rpx;"></view></navigator>
			</template>
			<template slot="ad">
				<swiper
					:indicator-dots="swiper.indicatorDots"
					:autoplay="swiper.autoplay"
					:interval="swiper.interval"
					:duration="swiper.duration"
					:circular="swiper.circular"
					style="height:320rpx;flex:1;"
				>
					<swiper-item v-for="(swipe, index) in swiper.data">
						<navigator :url="swipe.src"><image :src="swipe.url" :lazy-load="true" mode="aspectFill" style="width:100%;height:320rpx;flex:1;"></image></navigator>
					</swiper-item>
				</swiper>
			</template>
		</custom-tabs>
		<custom-news-list v-show="tabIndex === 0" :item="tabs.data[tabIndex]">
			<template #top>
				<custom-icons :item="localChannels"></custom-icons>
			</template>
		</custom-news-list>
		<custom-news-list v-show="tabIndex === 1" :item="tabs.data[tabIndex]"></custom-news-list>
		<custom-gotop v-show="isShowGoTop"></custom-gotop>
	</view>
</template>

<script>
export default {
	data() {
		return {
			isShowGoTop: false,
			tabs: {
				fixed: true,
				data: [
					{
						title: '本地',
						baseStoreName: 'getLocalData',
						storeName: 'getMoreLocalData',
						pn: 0,
						loading: false,
						loaded: false,
						data: []
					},
					{
						title: '推荐',
						baseStoreName: 'getRecommendData',
						storeName: 'getMoreRecommendData',
						pn: 0,
						loading: false,
						loaded: false,
						data: []
					}
				]
			},
			tabIndex: 1,
			candidates: ['抚顺'],
			currentCity: '抚顺',
			swiper: {
				indicatorDots: true,
				autoplay: true,
				interval: 2000,
				duration: 500,
				circular: true,
				data: []
			},
			localChannels: {
				data: []
			},
			isLogin: false
		};
	},
	onShow() {
		this.boolLogin(this.getPageData)
	},
	onLoad() {
		this.$on('onTabChange', this.onTabChange);
		this.boolLogin(this.getPageData)
	},
	onPullDownRefresh() {
		this.boolLogin(this.getPageData)
	},
	onReachBottom() {
		let that = this,
			tab = this.tabs.data[this.tabIndex];
		this.boolLogin().then(() => {
			if (!tab.loading && !tab.loaded) {
				tab.loading = true;
				// uni.showLoading({
				// 	title: '正在拉取中',
				// 	mask: true,
				// 	complete() {
				if (that.tabIndex === 1 && tab.pn + 1 >= 5) {
					tab.loading = false;
					tab.loaded = true;
					uni.hideLoading();
					return;
				}
				that.$store
					.dispatch(tab.storeName, { pn: tab.pn + 1 })
					.then(res => {
						console.log(res);
						if (res.data.length > 0) {
							tab.data = tab.data.concat(res.data);
						} else {
							tab.loaded = true;
						}
					})
					.catch(err => {
						console.log(err);
					})
					.finally(() => {
						tab.loading = false;
						tab.pn += 1;
						uni.hideLoading();
					});
				// 	}
				// });
			}
		})
	},
	onPageScroll(v) {
		if (v.scrollTop >= 200) {
			this.isShowGoTop = true;
		} else {
			this.isShowGoTop = false;
		}
	},
	methods: {
		boolLogin(callback){
			let that = this;
			return new Promise((resolve, reject) => {
				that._plugins.boolLogin().then(() => {
					callback && callback()
					resolve()
				}).catch(() => {
					uni.navigateTo({
						url:"../login/login"
					});
				})
			})
		},
		getPageData() {
			let that = this;
			// uni.showLoading({
			// 	title: '正在拉取中',
			// 	mask: true,
			// 	complete() {
			Promise.all([
				that.getAdData({
					page: 'index',
					type: 'swiper'
				}),
				that.getLocalChannels(),
				that.getLocalData(),
				that.getRecommendData()
			])
				.then(res => {
					console.log(res);
				})
				.catch(err => {
					console.log(err);
				})
				.finally(() => {
					uni.stopPullDownRefresh();
					uni.hideLoading();
				});
			// 	}
			// });
		},
		getAdData(json) {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$store
					.dispatch('getAdData', json)
					.then(res => {
						console.log(res);
						that.swiper.data = res.data;
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		},
		getLocalChannels() {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$store
					.dispatch('getLocalChannels', {})
					.then(res => {
						console.log(res);
						that.localChannels.data = res.data;
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		},
		getLocalData() {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$store
					.dispatch('getLocalData', {})
					.then(res => {
						console.log(res);
						that.tabs.data[0].data = res.data;
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		},
		getRecommendData() {
			let that = this;
			return new Promise((resolve, reject) => {
				that.$store
					.dispatch('getRecommendData', {})
					.then(res => {
						console.log(res);
						that.tabs.data[1].data = res.data;
						resolve();
					})
					.catch(err => {
						console.log(err);
						reject(err);
					});
			});
		},
		onTabChange(index) {
			this.tabIndex = index;
			let that = this;
			// uni.showLoading({
			// 	title: '正在拉取中',
			// 	mask: true,
			// 	complete() {
			that[that.tabs.data[that.tabIndex].baseStoreName]().finally(() => {
				uni.hideLoading();
			});
			// 	}
			// });
		}
	}
};
</script>

<style lang="less">
.index_page {
	height: 100%;
	//background-color: #efefef;
	swiper {
		margin: 10rpx;
	}
	.combox {
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 24rpx;
		.text {
			width: 70rpx;
			text-align: center;
		}
		.iconfont {
			padding: 23.5rpx 0;
			font-size: 24rpx;
		}
	}
}
</style>
